import '../../css/funds.css'
import React from 'react';
import {Button, Checkbox, Form, Input} from 'antd';
import axios from 'axios';
import moment from 'moment';
import {promise} from "../../utils/http";
import {useNavigate} from "react-router-dom";

moment.fn.toJSON = function () {
    return this.format('YYYY-MM-DD HH:mm:ss')
}
axios.defaults.baseURL = '/api';


const LoginForm = () => {
    let navigate = useNavigate();
    const login = (data) => {
        promise('/webLogin', data).then(value => {
            if (value.success) {
                setTimeout(() => {
                    navigate("/main")
                })
            }
        });
    }
    const onFinish = (values) => {
        login(values)
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return <div><Form
        name="basic"
        labelCol={{
            span: 8,
        }}
        wrapperCol={{
            span: 16,
        }}
        style={{
            maxWidth: 600,
        }}
        initialValues={{
            remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
    >
        <Form.Item
            label="Username"
            name="username"
            rules={[
                {
                    required: true,
                    message: 'Please input your username!',
                },
            ]}
        >
            <Input/>
        </Form.Item>

        <Form.Item
            label="Password"
            name="password"
            rules={[
                {
                    required: true,
                    message: 'Please input your password!',
                },
            ]}
        >
            <Input.Password/>
        </Form.Item>

        <Form.Item
            name="remember"
            valuePropName="checked"
            wrapperCol={{
                offset: 8,
                span: 16,
            }}
        >
            <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <Form.Item
            wrapperCol={{
                offset: 8,
                span: 16,
            }}
        >
            <Button type="primary" htmlType="submit">
                Submit
            </Button>
        </Form.Item>
    </Form>
    </div>
}


export default function Login() {
    return <div>
        <LoginForm/>
    </div>
}
